<template>
  <mu-flex id="map-root" direction="column">
    <mu-appbar id="appBar" :z-depth="2" color="primary" title="就医地图"></mu-appbar>

    <baidu-map
            v-show="!isShowAddresses"
            id="map"
            ak="3g9oi6F1GGi6Pq9dCz601pKiDqwyH4G0"
            :scroll-wheel-zoom="true"
            :center="center"
            :zoom="zoom"
            @ready="onReady"
            @moveend="syncCenterAndZoom"
            @zoomend="syncCenterAndZoom">
      <bm-geolocation
              anchor="BMAP_ANCHOR_TOP_LEFT"
              :showAddressBar="true"
              :autoLocation="true"
              @locationSuccess="onLocationSuccess"
              @locationError="onLocationError"></bm-geolocation>
      <bm-scale anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-scale>
      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
      <bm-local-search :location="center" keyword="医院" :auto-viewport="false" :panel="false"></bm-local-search>
      <!--<template v-for="(value, index) in hospitals">-->
        <!--<bm-marker :key="index" :position="value.center"></bm-marker>-->
      <!--</template>-->
    </baidu-map>

    <mu-slide-bottom-transition>
      <div id="address-list-container" v-show="isShowAddresses">
        <mu-list>
          <template v-for="(value, index) in hospitals">
            <mu-list-item
                    button
                    :ripple="true"
                    :key="index"
                    :value="index">
              <mu-list-item-title>{{ value.name }}</mu-list-item-title>
            </mu-list-item>
          </template>
        </mu-list>
      </div>
    </mu-slide-bottom-transition>

    <!--todo 不显示医院列表-->
    <mu-button id="fab" fab @click="onFabClick" v-if="false">
      <mu-icon :value="isShowAddresses ? 'close' : 'map'"></mu-icon>
    </mu-button>
  </mu-flex>
</template>

<script lang="ts">
  let constant = {
    hospitals: [
      {id: 1, name: "北京协和医院(东院)", center: {lng: 116.404, lat: 39.915}},
      {id: 2, name: "北京市东城区口腔医院", center: {lng: 126.404, lat: 39.915}},
      {id: 3, name: "首都医科大学附属北京同仁医院（西区）", center: {lng: 136.404, lat: 39.915}},
      {id: 4, name: "北京市东城区口腔医院", center: {lng: 146.404, lat: 39.915}},
      {id: 5, name: "首都医科大学附属北京天坛医院", center: {lng: 156.404, lat: 39.915}},
      {id: 6, name: "首都医科大学附属北京中医医院", center: {lng: 166.404, lat: 39.915}},
      {id: 7, name: "北京医院", center: {lng: 176.404, lat: 39.915}},
      {id: 8, name: "北京中医药大学东直门医院", center: {lng: 186.404, lat: 39.915}},
      {id: 9, name: "陆军总医院", center: {lng: 116.404, lat: 49.915}},
      {id: 9, name: "陆军总医院", center: {lng: 116.404, lat: 59.915}},
      {id: 9, name: "陆军总医院", center: {lng: 116.404, lat: 69.915}},
      {id: 9, name: "陆军总医院", center: {lng: 116.404, lat: 79.915}},
      {id: 9, name: "陆军总医院", center: {lng: 116.404, lat: 89.915}},
      {id: 9, name: "陆军总医院", center: {lng: 116.404, lat: 99.915}},
      {id: 9, name: "陆军总医院", center: {lng: 116.404, lat: 19.915}},
      {id: 9, name: "陆军总医院", center: {lng: 116.404, lat: 29.915}},
      {id: 9, name: "陆军总医院", center: {lng: 116.404, lat: 109.915}},
      {id: 9, name: "陆军总医院", center: {lng: 116.404, lat: 119.915}},
    ],

  };

  export default {
    data() {
      return {
        center: {lng: 104.06792346, lat: 30.67994285},
        zoom: 15,
        open: false,
        hospitals: constant.hospitals,
        isShowAddresses: false,
      }
    },
    mounted() {
      this.$nextTick(() => {
        setTimeout(() => {
          document.getElementsByClassName('BMap_geolocationIcon')[0].click();
        }, 500);
      });
    },
    methods: {
      onReady({BMap, map}) {

      },
      syncCenterAndZoom(e) {
        this.center = e.target.getCenter();
        this.zoom = e.target.getZoom();
      },
      onFabClick() {
        this.isShowAddresses = !this.isShowAddresses;
      },
      onLocationSuccess(point) {
        // console.log(point);
      },
      onLocationError() {
        this.$toast.info('定位失败');
      },
    }
  }
</script>

<style scoped>
  #map-root {
    width: 100%;
    height: 100%;
    position: absolute;
  }

  #appBar {
    width: 100%;
    flex-shrink: 0;
  }

  #map, #address-list-container {
    width: 100%;
    flex: 1 1 0;
  }

  #address-list-container {
    overflow: auto;
  }

  #fab {
    position: fixed;
    right: 48px;
    bottom: 48px;
  }
</style>

<style>
  #map-root .BMap_bubble_title a {
    display: none;
  }
</style>